<script>
import CardToolbar from '../cardtoolbar/CardToolbar';
import ControlTools from './ControlTools.js';
export default {
  name: 'ExternalApp',
  components: {
    CardToolbar,
  },
  mixins: [ControlTools],
  props: {
    type: {
      type: String,
      default: '',
    },
    itemConfig: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<template>
  <div class="datav-externalapp">
    <CardToolbar
      v-if="hideTools"
      class="layout-toolbar" />
    <div
      class="external-app"
    >
      <div></div>
      <iframe
        id="show-iframe"
        :src="itemConfig.url"
        name="show-iframe"
        frameborder="0"
        marginwidth="0"
        marginheight="0"
        vspace="0"
        hspace="0"
        allowtransparency="true"
        scrolling="no"
        allowfullscreen="true"

      ></iframe>
    </div>
  </div>
</template>

<style lang="less" scoped>
.datav-externalapp {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
}
.layout-toolbar {
  display: none !important;
}

.external-app {
  min-height: 280px;
  width: 100%;
  height: 100%;
  background-color: #e4e5e7;
  font-size: 20px;

  div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40px;
    font-size: 12px;
    z-index: 899;
    cursor: move;
  }

  #show-iframe {
    min-height: 280px;
    width: 100%;
    height: 100%;
    background-color: #e4e5e7;
  }
}
</style>
